{% extends 'base_templates/base.html' %}

{% load i18n static %}

{% block title %}订单确认{% endblock %}

{% block breadcrumb %}
<div class="container">
	<nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
		<ul>
			<li><a href="{% url 'goods:index' %}">首页</a></li>
			<li class="is-active">&emsp;订单确认</li>
		</ul>
	</nav>
</div>
{% endblock %}

{% block container %}

<div class="box">
	<h1 class="is-size-5">收货地址</h1>
	<img width="100%" src="{% url 'media' 'img/line.png' %}" alt="line">
	{% include 'base_templates/base_address.html' with update=True delete=False %}
</div>

<div class="box">
	<h1 class="is-size-5">订单商品</h1>
	<div class=" dropdown-divider"></div>
	{% for dynamic in dynamics %}
		<div class="columns">
            <div class="column is-2 is-flex is-justify-content-center">
                <figure class="image is-128x128">
                    <img src="{{ dynamic.image }}" alt="{{ dynamic.name }}">
                </figure>
            </div>
            <div class="column is-flex is-flex-direction-column is-justify-content-center">
                <h1 class=" has-text-weight-bold">{{ dynamic.name }}</h1>
                <div class="has-text-grey-light">
                    {% for option in dynamic.options %}
                    <span class="mr-3">{{ option.spec }}：{{ option.name }}</span>
                    {% endfor %}
                </div>
            </div>
            <div class="column is-2 is-flex is-justify-content-center is-align-items-center">
                {{ dynamic.price }}&ensp;x&ensp;{{ dynamic.count }}
            </div>
            <div class="column is-2 is-flex is-justify-content-center is-align-items-center">
                ¥{{ dynamic.total_price }}
            </div>
        </div>
	{% endfor %}

	<div class="dropdown-divider"></div>

	<div id="order">
		<div class="box is-shadowless is-radiusless has-background-light">
			<div class="field">
				<label class="label">订单留言</label>
				<div class="control">
					<textarea class="textarea" v-model="mark" name="mark" placeholder="请备注说明您的特殊要求..."></textarea>
				</div>
			</div>
		</div>

		<div class="is-flex is-flex-direction-column">
			<div class="is-flex mb-2">
				<div class="has-text-right" style="width:85%">{{ total_count }} 件商品，总商品金额：</div>
				<div class="has-text-left" style="width:10%; margin-left:5%;">¥{{ amount_price }} </div>
			</div>
			<div class="is-flex mb-2">
				<div class="has-text-right" style="width:85%">运费：</div>
				<div class="has-text-left" style="width:10%;margin-left:5%;">¥{{ freight }} </div>
			</div>
			<div class="is-flex has-text-danger-dark">
				<div class=" has-text-right is-size-5" style="width:85%">应付总额：</div>
				<div class=" has-text-left is-size-5" style="width:10%; margin-left:5%;">¥{{ total_price }} </div>
			</div>
		</div>
		<div class=" dropdown-divider"></div>
		<div class="has-text-right">
			<button class="button is-primary mt-2 pl-6 pr-6 is-large" @click="confirmOrder">提交订单</button>
		</div>

	</div>
</div>
{{ dynamics|json_script:"dynamics-data" }}
{% endblock %}

{% block vue %}
<script>
	var skusData = JSON.parse(document.getElementById('dynamics-data').textContent);
	var order = new Vue({
		el: "#order",
		delimiters: ['{$', '$}'],
		data: {
			mark: "",
			skus: skusData
		},
		methods: {
			getBaykeorderSKUSet(){
				let baykeordersku_set = []
				this.skus.forEach(element => {
					let item_skus = {}
					item_skus['id'] = element.id
					item_skus['count'] = element.count
					baykeordersku_set.push(item_skus)
				});
				return baykeordersku_set
			},

			confirmOrder() {
				let addr = address._data.formProps
				console.log(this.getBaykeorderSKUSet())
				request({
                    url: '{% url "order:order" %}',
					method: 'post',
					data: {
						dynamics_datas: this.getBaykeorderSKUSet(),
                        addr_id: addr.id,
                        amount_price: {{ amount_price }},
                        total_count: {{ total_count }},
                        mark: this.mark
					}
				}).then(res => {
					if (res.data.status == 200) {
                        var order_id = res.data.order_id
						location.href = "/order/pay/" + `${order_id}`
					} 
                    else {
						bayke.toastMessage('is-danger', res.data.errmsg);
                        if(res.data.exception) {
                            console.log(res.data.exception)
                        }
					}
				})

			}
		},
	})
</script>
{% endblock %}